<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<style>
  body, html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-image: url('img.png'); /* 替换为你的背景图片地址 */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: opacity(0.9);
  }
  .background-overlay {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明覆盖层 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* 确保覆盖层在背景之下 */
  }
  .title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-size: 2em; 
    font-weight: bold; /* 设置字体为加粗 */
    text-align: center; /* 如果需要居中标题文本 */
    z-index: 2;
  }
  .login-container {
    background-color: white; /* 正常背景 */
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    z-index: 2; /* 确保登录框在覆盖层之上 */
    position: relative; /* 相对定位，确保登录框不被覆盖层遮挡 */
    text-align: center;
  }
  .login-container h2 {
    text-align: center;
    color: #333;
  }
  .form-group {
    margin-bottom: 1rem;
  }
  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    text-align: left;
  }
  .form-group input {
    width: 90%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s ease;
  }
  .form-group input:focus {
    border-color: #2575fc;
  }
  .form-group button {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 5px;
    background-color: #2575fc;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .form-group button:hover {
    background-color: #1d6ec0;
  }
  .form-group button:active {
    transform: scale(0.98);
  }
</style>
</head>
<body>

<div class="background-overlay"></div>
<div class="title">露天矿区遥感生态指数监测可视化系统</div>
<div class="login-container">
  <h2>登录</h2>
  <form id="loginForm">
    <div class="form-group">
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div class="form-group">
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <div class="form-group">
      <button type="button" onclick="login()">登录</button>
    </div>
  </form>
</div>

<script>
function login() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/login', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      if (response.success) {
        alert("登录成功！");
        window.location.href = 'dashboard.html';
      } else {
        alert("用户名或密码错误！");
      }
    }
  };
  xhr.send(JSON.stringify({ username: username, password: password }));
}
</script>

</body>
</html>